<template>
  <div>
    <div class="head">
      <el-form inline :model="selectdata"
               label-width="150px"
               size="small"
      >


        <el-form-item>
          <el-input v-model="selectdata.id" @keyup.enter.native="search"
                    placeholder="请输入消息ID">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="selectdata.nickname" @keyup.enter.native="search"
                    placeholder="请输入昵称">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
          <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>


    </div>


    <div>
      <!-- 表 -->
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="消息ID" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>


        <el-table-column label="发送方ID" align="center">
          <template slot-scope="scope">{{ scope.row.fromUserId }}</template>
        </el-table-column>

        <el-table-column label="发送方昵称" align="center">
          <template slot-scope="scope">{{ scope.row.formUserNickname }}</template>
        </el-table-column>


        <el-table-column label="接收方ID" align="center">
          <template slot-scope="scope">{{ scope.row.toUserId }}</template>
        </el-table-column>

        <!--        <el-table-column label="接收方昵称" align="center">-->
        <!--          <template slot-scope="scope">{{ scope.row.toUserNickname }}</template>-->
        <!--        </el-table-column>-->

        <el-table-column label="消息" align="center">
          <template slot-scope="scope">{{ scope.row.content }}</template>
        </el-table-column>

        <el-table-column label="消息状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status===1" style="color: green">已回复</span>
            <span v-if="scope.row.status===0" style="color: red">未回复</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.createTime | filterCtime }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">

            <el-button plain size="mini" type="success"
                       @click="openReply(scope.row.toUserId)">回复
            </el-button>

            <el-button plain size="mini" type="danger"
                       @click="deleteChat(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>


      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>

    <el-dialog
        title="回复消息"
        :visible.sync="replyDialogVisible"
        width="30%"
        center>
      <el-form :model="form" label-width="80px">

        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="replyDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="replyMessage">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

import {receive, send, delete_chat, reply} from '@/api/im'
import moment from "moment";

export default {
  name: "chat-table",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      replyDialogVisible: false,
      tableData: [],
      dateRange: [],
      formInline: {},
      toUserId: "",
      form: {
        content: ""
      },
      selectdata: {
        userId: "",
        nickname: "",

      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /**
     * 重置搜索
     */
    clearForm() {
      this.selectdata = {};
      this.getData();
    },
    deleteChat(id) {
      let params = {};
      params.id = id;
      delete_chat(params).then(res => {
        this.$message.success("删除成功")
        this.getData();
      })
    },

    replyMessage() {
      let params = {};
      params.toUserId = this.toUserId;
      params.content = this.form.content;
      let userInfo = localStorage.getItem("userInfo");
      params.fromUserId = JSON.parse(userInfo).userId;
      reply(params).then(res => {
        if (res.status === 200) {
          this.$message.success("回复成功");
          this.replyDialogVisible = false;
          this.toUserId = ""
          this.getData();
        }
      })
    },
    //回复用户
    openReply(toUserId) {
      this.toUserId = toUserId;
      this.replyDialogVisible = true;
    },

    getData() {
      let userInfo = localStorage.getItem("userInfo");
      let userId = JSON.parse(userInfo).userId;
      let params = {};
      params.toUserId = userId;
      receive(params).then(res => {
        if (res.status === 200) {
          //console.log(res.data.list)
          this.total = Number.parseInt(res.data.total);
          this.tableData = res.data.list;
          this.loading = false;
        }
      })
    },

    /**
     * 搜索
     */
    search() {
      this.currentPage = 1;
      this.getData()
    },


    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getData();
    },
  },
  filters: {
    filterCtime(ctime) {
      // 过滤时间
      if (ctime) {
        return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return '暂无数据'
      }
    },
    filterShow(show) {
      if (show === 1) {
        return '显示'
      } else {
        return '不显示'
      }
    }
  }
}
</script>

<style scoped>
.chat_form {
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

.menu {
  width: 80px;
  height: 600px;
  margin: 50px 380px;
  background-color: #282828;
  position: absolute;
}

.chat_title {
  position: absolute;
  height: 60px;
  width: 536px;
  background-color: #F0FFFF;
  margin-left: 265px;
  color: #282828;
  line-height: 60px;
  font-size: 20px;


}

textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-family: "Micrsofot Yahei";
  resize: none;
}

table {
  margin-top: 10px;

}

tr:hover {
  background-color: #dafdf3;
}

tr {
  width: 265px;
}


td:last-child {
  padding-left: 20px;
}

.chat_content {
  position: absolute;
  margin-top: 400px;
  height: 200px;
  width: 536px;
  background-color: #f9f9f9;
  margin-left: 265px;
  color: #282828;
  line-height: 60px;
  font-size: 20px;
}

.person_list {
  width: 265px;
  height: 600px;

  background-color: #F0F8FF;
  position: absolute;
}

.container {
  width: 800px;
  height: 600px;
  box-shadow: 1px 1px 15px #909090;
  margin-top: 50px;
  margin-left: 450px;
  position: absolute;
}

ul li:hover {
  background-color: #CCCCCC;
  cursor: pointer;
}

#avatar {
  width: 35px;
  height: 35px;
  margin-left: 16px;
  margin-top: 20px;
}

</style>
